<template>
    <div class="table-container">
        <el-table :data="foodItems" border style="width: 100%">
            <el-table-column align="center" prop="id" label="ID" width="80" />
            <el-table-column align="center" prop="name" label="菜品名称" width="150" />
            <el-table-column align="center" prop="category" label="分类" width="120" />
            <el-table-column align="center" prop="cooking_time" label="烹饪时间" width="120" />
            <el-table-column align="center" prop="price" label="价格" width="100" />
            <el-table-column align="center" prop="rating" label="评分" width="100" />
            <el-table-column align="center" prop="spice_level" label="辣度" width="100" />
            <el-table-column align="center" prop="ingredients" label="配料" width="200">
                <template #default="{ row }">
                    <ul>
                        <li v-for="(ingredient, index) in row.ingredients" :key="index">{{ ingredient }}</li>
                    </ul>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="description" label="描述" width="250" />
            <el-table-column align="center" prop="image" label="图片" width="150">
                <template #default="{ row }">
                    <img :src="row.image" alt="Food Image" class="food-image" />
                </template>
            </el-table-column>
            <el-table-column fixed="right" align="center" label="操作" width="220">
                <template #default="{ row }">
                    <el-button type="success" @click="reset" size="small" plain round>刷新</el-button>
                    <el-button type="primary" @click="editFood(row.id)" size="small" plain round>编辑</el-button>
                    <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" :icon="InfoFilled"
                        icon-color="#626AEF" title="确定删除吗？" @confirm="deleteFood(row.id)">
                        <template #reference>
                            <el-button type="danger" size="small" plain round>删除</el-button>
                        </template>
                    </el-popconfirm>

                </template>
            </el-table-column>
        </el-table>

    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { InfoFilled } from '@element-plus/icons-vue'
import foot from '@/data/Foot';
const router = useRouter()


const foodItems = ref()
const localData = JSON.parse(localStorage.getItem("sys_foot"))
foodItems.value = localData
const reset = () => {
    foodItems.value = foot
    localStorage.setItem("sys_foot", JSON.stringify(foot))
}
// 编辑美食，跳转到编辑页面
const editFood = (id) => {
    let param = {
        footId: id
    }
    router.push({
        path: '/food-edit',
        query: param
    })
}

// 删除美食
const deleteFood = (id) => {
    foodItems.value = foodItems.value.filter(item => item.id !== id)
    localStorage.setItem("sys_foot", JSON.stringify(foodItems.value))
}
</script>

<style scoped>
.table-container {
    width: 1200px;
    margin: 40px auto;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #dcdfe6;
    border-radius: 12px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
}

.el-table {
    border-radius: 8px;
}

.food-image {
    width: 100px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
}

.el-button {
    margin-right: 8px;
}
</style>